<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2024-01-04 00:31:33
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-01-31 23:21:31
-->
<template>
  <a-modal
    :open="visible"
    :keyboard="false"
    :maskClosable="false"
    :title="title"
    @cancel="onCancel"
    @ok="onSubmit"
    :confirmLoading="submitLoading"
    :width="650"
  >
    <a-form
      layout="horizontal"
      :labelCol="{ span: 4 }"
      :wrapperCol="{ span: 19 }"
    >
      <a-form-item label="所属组织架构">
        <a-input :disabled="true" :value="organizationName"></a-input>
      </a-form-item>
      <a-form-item label="组织人员">
        <user-select
          v-model:value="formModel.userIds"
          mode="multiple"
          :disabled-ids="currentUsers"
        ></user-select>
      </a-form-item>
      <a-form-item label="岗位职务">
        <div class="users">
          <a-row class="row row-header">
            <a-col :span="12" class="col"> 姓名 </a-col>
            <a-col :span="12" class="col">职务</a-col>
          </a-row>
          <a-row
            class="row"
            v-for="item in formModel.userItems"
            :key="item.userId"
          >
            <a-col :span="12" class="col">
              <a-input
                disabled
                :value="getUserName(item.userId)"
                size="small"
              />
            </a-col>
            <a-col :span="12" class="col">
              <dictionary-select
                name="Platform.BasePost"
                v-model:value="item.postName"
                size="small"
              />
            </a-col>
          </a-row>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { AddOrganizationUsersInputDto } from "@/api/organize/types";
import api from "@/api/organize/organization";
import { onMounted, ref, watch } from "vue";
import { message } from "ant-design-vue";
import { getUserName } from "@/plugins/conversion";

const props = defineProps({
  visible: { type: Boolean, required: true },
  organizationId: { type: String, required: true },
  organizationName: { type: String, required: true },
  currentUsers: { type: Array, required: true },
});
const title = ref("添加部门人员");
const emits = defineEmits(["update:visible", "close", "success"]);
const submitLoading = ref(false);

const formModel = ref<AddOrganizationUsersInputDto>({
  organizationId: "",
  userIds: [],
  userItems: [],
});

watch(
  () => formModel.value.userIds,
  (val: Array<string>) => {
    let items = formModel.value.userItems;
    val.map((id) => {
      if (!items.find((x) => x.userId == id)) {
        items.push({ userId: id, postName: "部门成员" });
      }
    });
    formModel.value.userItems = items.filter(
      (x) => val.findIndex((uid) => uid == x.userId) !== -1
    );
  }
);

/**
 * 提交
 */
const onSubmit = async () => {
  if (!formModel.value.userIds.length) {
    message.error("请选择要添加的部门人员信息");
    return;
  }
  try {
    submitLoading.value = true;
    await api.addUsers(formModel.value);
    emits("success");
    emits("update:visible", false);
  } finally {
    submitLoading.value = false;
  }
};

/**
 *
 */
const onCancel = () => {
  emits("close");
  emits("update:visible", false);
};

onMounted(() => {
  formModel.value.organizationId = props.organizationId;
});
</script>

<style lang="less" scoped>
.users {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  .row {
    border-bottom: 1px solid #ddd;
    &-header {
      background: #f8f8f8;
    }
    .col {
      border-right: 1px solid #ddd;
      padding: 5px;
    }
  }
}
</style>
